<template>
  <el-container class="main_con" >
    <div class="order_steps">
      <el-steps :active="active" align-center>
        <el-step v-for="(item,i) in obj.process" :key="i" :status="item.state == 3 ? 'error' : ''" :title="item.step_name" :description="item.handle_time"></el-step>
      </el-steps>
    </div>

    <div class="order_content">维权状态：<span style="font-weight:bold;">{{obj.state | state_text}}</span></div>

    <div class="order_content">
      <div class="content_area" v-if="obj.order">
        <div class="c_box">
          <div class="btitle">订单信息:</div>
          <div class="line">
            <div class="lb">
              <div class="label">付款方式:</div>
              <div class="txt">{{obj.order.pay_id}}</div>
            </div>
          </div>

          <div class="line">
            <div class="lb">
              <div class="label">买家:</div>
              <div class="txt">
                <el-button type="text">{{obj.order.user.nickname}}</el-button>
              </div>
            </div>
          </div>

          <div class="line">
            <div class="lb">
              <div class="label">来源:</div>
              <div class="txt"><i class="weixin el-sc-weixin4"></i></div>
            </div>
          </div>

          <div class="line">
            <div class="lb">
              <div class="label">收货人:</div>
              <div class="txt">{{obj.order.consignee}}</div>
            </div>
          </div>

          <div class="line">
            <div class="lb">
              <div class="label">联系号码:</div>
              <div class="txt">{{obj.order.iphone}}</div>
            </div>
          </div>

          <div class="line">
            <div class="lb">
              <div class="label">收货地址:</div>
              <div class="txt">{{obj.order.address}}</div>
            </div>
          </div>

          <div class="line">
            <div class="lb">
              <div class="label">买家备注:</div>
              <div class="txt">{{obj.order.remake}}</div>
            </div>
          </div>

        </div>
        <div class="c_box">
          <div class="btitle">维权信息</div>
          <div class="line">
            <div class="lb">
              <div class="label">维权类型:</div>
              <div class="txt">{{obj.type_text}}</div>
            </div>
          </div>

          <div class="line">
            <div class="lb">
              <div class="label">维权金额:</div>
              <div class="txt">￥{{obj.money}}</div>
            </div>
          </div>

          <div class="line">
            <div class="lb">
              <div class="label">维权编号:</div>
              <div class="txt">{{obj.after_no}}</div>
            </div>
          </div>

          <div class="line">
            <div class="lb">
              <div class="label">维权说明:</div>
              <div class="txt">{{obj.explain}}</div>
            </div>
          </div>

          <div class="line" v-if="obj.imgs&&obj.imgs.length">
            <div class="lb">
              <div class="label">维权凭证:</div>
              <div class="txt">
                <div class="pics">
                  <el-link  v-for="(item,i) in obj.imgs" :key="i" target="_blank" :href="item">
                    <vimage
                    style="width: 40px; height: 40px"
                    :src="item"
                    :fit="'cover'"></vimage>
                  </el-link>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="c_box" v-if="obj.express_num || obj.deliver_num">
          <span v-if="obj.express_num">
          <div class="btitle">买家退货信息</div>
          <div class="line">
            <div class="lb">
              <div class="label">快递公司:</div>
              <div class="txt">{{obj.express_company}}</div>
            </div>
          </div>

          <div class="line">
            <div class="lb">
              <div class="label">快递单号:</div>
              <div class="txt">{{obj.express_num}}</div>
            </div>
          </div>

          <div class="line">
            <div class="lb">
              <div class="label">发货时间:</div>
              <div class="txt">{{obj.return_time}}</div>
            </div>
          </div>
          </span>

          <span v-if="obj.deliver_num">
          <div class="btitle">商家发货信息</div>
          <div class="line">
            <div class="lb">
              <div class="label">快递公司:</div>
              <div class="txt">{{obj.deliver_company}}</div>
            </div>
          </div>

          <div class="line">
            <div class="lb">
              <div class="label">快递单号:</div>
              <div class="txt">{{obj.deliver_num}}</div>
            </div>
          </div>

          <div class="line">
            <div class="lb">
              <div class="label">发货时间:</div>
              <div class="txt">{{obj.deliver_time}}</div>
            </div>
          </div>
          </span>
        </div>
      </div>
      <el-divider v-if="obj.state != 3 && obj.state != 7&& obj.state != 8 && obj.state != 9"></el-divider>
      <div class="buttons" v-if="obj.state != 3 && obj.state != 7&& obj.state != 8 && obj.state != 9">
        <el-button type="primary" @click="accessAfter" style="margin-right:10px">处理维权</el-button>
      </div>
    </div>
    <div class="order_items">
      <div class="list">
        <el-table :data="obj.afterCommodity">
            <el-table-column label="订单商品">
              <template slot-scope="scope">
                <div class="pro">
                  <div class="img">
                    <vimage
                    style="width: 80px; height: 80px;"
                    :src="scope.row.master"
                    fit="fit"></vimage>
                  </div>
                  <div class="txt">
                    <div class="name">{{scope.row.name}}</div>
                    <div class="class">{{scope.row.pvs_value_new}}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="价格">
              <template slot-scope="scope">
                ￥{{scope.row.sell_price}}
              </template>
            </el-table-column>
            <el-table-column label="数量">
              <template slot-scope="scope">
                X{{scope.row.count}}
              </template>
            </el-table-column>
            <el-table-column label="小计">
              <template slot-scope="scope">
                ￥{{scope.row.countPrice}}
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                {{scope.row.after_status | after_status_text}}
              </template>
            </el-table-column>
            <el-table-column label="物流单号">
              <template slot-scope="scope">
                {{scope.row.express_company}} - {{scope.row.logistics_no}}
              </template>
            </el-table-column>
          </el-table>
      </div>
      <div class="total">
        <div class="count">
          <div class="line">
            <div class="label">商品小计</div>
            <div class="money">￥{{orderItemCountPrice}}</div>
          </div>
     <!--     <div class="line">
            <div class="label">运费</div>
            <div class="money">￥{{obj.freight ? obj.freight : '0.00'}}</div>
          </div> -->
          <!-- <div class="line">
            <div class="label">优惠抵扣</div>
            <div class="money red">-￥10.00</div>
          </div> -->
           <div class="line">
            <div class="label">维权退款</div>
            <div class="money red bold">￥{{obj.money}}</div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      destroy-on-close
      title="处理维权"
      :visible.sync="showAccess"
      width="70%" >
      <afterAccess :order="obj" @success="done"></afterAccess>
    </el-dialog>
  </el-container>
</template>

<script>
import afterAccess from './components/afterAccess';
import { getAfter } from '@/api/shop/order';
export default {
  data(){
    return {
      rk:1,
      accObj:{},
      showAccess:false,
      isLoading:false,
      active:0,
      orderItemCountPrice:'0.00',
      obj:{}
    }
  },
  components: {
    afterAccess
  },
  created(){
    if(this.$route.query.id){
      //查看详情
      this.getAfter(this.$route.query.id);
    }else{
      //无参数,禁止进入该页面
      this.$router.back(-1);
    };
  },
  mounted(){
    //this.searchList();
  },
  filters:{
    after_status_text:function(value){
      switch(value){
        case '1':
          return '维权中';
          break;
        case '2':
          return '已维权';
          break;
        case '3':
          return '维权完成';
          break;
        default:
          return '-';
          break;
      };
    },
    state_text:function(value){
      switch(value){
        case 1:
          return '等待商家处理';
          break;
        case 2:
          return '同意申请';
          break;
        case 3:
          return '驳回申请';
          break;
        case 4:
          return '商家已发货，等待客户收货';
          break;
        case 5:
          return '手动退款';
          break;
        case 6:
          return '确认发货';
          break;
        case 7:
          return '退款退货完成';
          break;
        case 8:
          return '退款完成';
          break;
        case 9:
          return '换货完成';
          break;
        case 10:
          return '退回物品,等待退款';
          break;
        case 11:
          return '同意退款';
          break;
        case 12:
          return '等待买家退回商品';
          break;
        case 13:
          return '买家退回物品，等待退款';
          break;
        case 14:
          return '买家退回物品，等待商家重新发货';
          break;
        default:
          return '状态不明';
          break;
      };
    }
  },
  methods:{
    //维权处理结束回调
    done(){
      this.showAccess = false;
      this.getAfter(this.$route.query.id);
    },
    //处理维权
    accessAfter(){
      //console.log(this.obj)
      //this.accObj = {...this.obj};
      this.showAccess = true;
    },
    //获取订单详情数据
    getAfter(id){
      this.isLoading = true;
      getAfter(id).then(res => {
        this.isLoading = false;
        let o = res.msg;
        let x = 0;
        o.afterCommodity.forEach(e => {
          //转换处理SKU数据->红+L+大
          if(e.pvs_value){
            let l = e.pvs_value.split(','),
              s = '';
            l.forEach(k => {
              s += k.split(':')[1] + '+';
            });
            s = s.substring(0,s.length - 1);
            e.pvs_value_new = s;
          };
          //处理小计数据
          e.countPrice = (e.sell_price * e.count).toFixed(2);
          x += e.sell_price * e.count;
        });
        this.orderItemCountPrice = x.toFixed(2);
        //处理进度面板
        let ac = o.process.findIndex(_ => {
          return _.handle_time == null;
        });
        this.active = ac == -1 ? o.process.length : ac;

        this.obj = o;
      }).catch(e => {
        this.isLoading = false;
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.order_steps{
  background: #fff;
  padding: 40px 100px;
}

.order_content{
  margin-top: 20px;
  background: #fff;
  padding: 20px;
  color: #606266;
  font-size: 14px;

  .content_area{
    display: flex;

    .c_box{
      flex: 1;
      border-right: 1px solid #DCDFE6;

      &:last-child{
        border-right: 0;
      }

      &:nth-child(n+2){
        padding:0 20px;
      }

      .btitle{
        font-size: 16px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 10px;
      }

      .line{
        display: flex;
        height: 36px;
        line-height: 36px;

        .lb{
          display: flex;
          flex-grow: 1;

          .label{
            width: 80px;
            text-align: right;
            flex-shrink: 0;
          }

          .txt{
            display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
            -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
            overflow: hidden; /*超出的文本隐藏*/
            text-overflow: 'ellipsis'; /* 溢出用省略号*/
            -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/

            .weixin{
              font-size: 18px;
              color: #333;
            }

            .pics{
              a{
                margin-right:5px;
                margin-bottom:5px;
              }
            }
          }
        }

        .status{
          display: flex;
          width: 300px;

          .label{
            width: 80px;
            text-align: right;

            &::after{
              content: ('：');
            }
          }

          .txt{
            font-size: 16px;
            font-weight: 700;
          }
        }
      }
    }
  }



}

.order_items{
  margin-top: 20px;
  background: #fff;
  padding: 20px;
  color: #606266;
  font-size: 14px;

  .list{
    .pro{
      display: flex;

      .img{
        width: 80px;
        margin-right: 10px;
      }

      .txt{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-content: space-between;
      }
    }
  }


  .total{
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;

    .count{
      .line{
        display: flex;
        height: 36px;
        line-height: 36px;

        .label{
          width: 80px;
          text-align: right;
          flex-shrink: 0;

          &::after{
            content: ('：');
          }
        }

        .money{
          font-size: 16px;

          &.red{
            color: #F56C6C;
          }

          &.bold{
            font-weight: bold;
          }
        }

      }
    }
  }
}
</style>
